<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面向对象Tab切换</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li {
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			.main {
				width: 960px;
				height: 500px;
				margin: 50px auto;
			}
			.main h5 {
				height: 100px;
				line-height: 100px;
				text-align: center;
				font-size: 16px;
			}
			.tabbox {
				position: relative;
				width: 900px;
				height: 400px;
				margin: 0 auto;
				border: 1px solid #ffa07a;
			}
			.fisrstnav ul {
				
				width: 100%;
				height: 50px;
				border-bottom: 1px solid #ccc;
			}
			.fisrstnav ul li {
				position: relative;
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-right: 1px solid #ccc;
			}
			.fisrstnav ul li .icon {
				position: absolute;
				top: 0;
				right: 0;
				display: block;
				width:15px;
				height: 15px;
				line-height: 10px;
				text-align: right;
				color: #fff;
				font-size: 10px;
				background: #000;
				border-bottom-left-radius: 15px;
				cursor: pointer;
			}
			.liactive {
				border-bottom: 1px solid #fff;
			}
			.tabadd {
				position: absolute;
				top: 0;
				right: 0;
				width: 42px;
				height: 42px;
				line-height: 42px;
				text-align: center;
				/*解决嵌套塌陷*/
				overflow: hidden;
			}
			.tabadd span {
				display: inline-block;
				width: 22px;
				height: 22px;
				line-height: 22px;
				border: 1px solid #ccc;
				cursor: pointer;
			}
			.tabscon {
				width: 100%;
				height: 300px;
				/*margin-top: 20px;*/
				padding: 10px 30px;
				/*background-color: pink;*/
			}
			.tabscon section {
				display: none;
				width: 100%;
				height: 100%;
				background: pink;
			}
			.tabscon section input {
				width: 80%;
				height: 200px;
			}
			.tabscon .conactive {
				display: block;
			}
			.fisrstnav ul li input {
				width: 95%;
				height: 35px;
			}
		</style>
	</head>
	<body>
		<div class="main" id="main">
			<h5>
				Js 面向对象 动态添加标签页
			</h5>
			<div class="tabbox">
				<!--头部导航条-->
				<nav class="fisrstnav">
					<ul>
						<li class="liactive">
							<span>测试1</span>
							<span class="icon">x</span>
						</li>
						
						<li>
							<span>测试2</span>
							<span class="icon">x</span>
						</li>
						<li>
							<span>测试3</span>
							<span class="icon">x</span>
						</li>
						
					</ul>
					
					<div class="tabadd">
						<span>+</span>
					</div>
				</nav>
				
				<!--tab内容-->
				<div class="tabscon">
					<section class="conactive">测试1</section>
					<section>测试2</section>
					<section>测试3</section>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/tab.js"></script>
	</body>
</html>
